import React, { PureComponent, Fragment } from 'react';
import moment from 'moment/moment';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Modal,
  Radio,
} from 'antd';

import { phone, email } from '@/utils/regular';
import { connect } from 'dva';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';

const RadioGroup = Radio.Group;

//更新和新增用户信息   modalVisible
@connect(({ accountModels, loading }) => ({
  accountModels,
  loading: loading.models.accountModels,
}))
@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      listData: {
        realName: '',
      },
    };

    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'accountModels/enterpriseList',
      payload: {},
    });
  }

  // 表单
  renderContent = () => {
    const { form, values, accountModels: { companyList }, modalVisible } = this.props;
    const userArr = [];
    if (companyList) {
      for (let i = 0; i < companyList.length; i++) {
        userArr.push(<Option key={companyList[i].enterpriseNo}>{companyList[i].enterpriseName}</Option>);
      }
    }
    console.log(values);
    return [
      <FormItem key="entUserName" {...this.formLayout} label="用户名称">
        {form.getFieldDecorator('entUserName', {
          rules: [{ required: true, message: '请输入用户名称！' }],
          initialValue: values.userName,
        })(<Input placeholder="请输入用户名称"/>)}
      </FormItem>,

      modalVisible ? <FormItem key="mobile" {...this.formLayout} label="手机号">
          {form.getFieldDecorator('mobile', {
            rules: [
              { required: true, message: '请输入手机号！' },
              { pattern: phone, message: '请输入正确手机号' },
            ],
            initialValue: values.mobile,
          })(<Input   type={'number'} placeholder="请输入手机号"/>)}
        </FormItem>
        : '',
      <FormItem key="pwd" {...this.formLayout} label="密码">
        {form.getFieldDecorator('pwd', {
          rules: [{ required: true, message: '请输入用户密码！' }],
          initialValue: values.pwd,
        })(<Input type={'password'} autocomplete='new-password' placeholder="请输入用户密码"/>)}
      </FormItem>,
      <FormItem key="enterpriseNo" {...this.formLayout} label="企业">
        {form.getFieldDecorator('enterpriseNo', {
          rules: [{ required: true, message: '请输选择企业！' }],
          initialValue: values.enterpriseNo,
        })(
          <Select
            style={{ width: '100%' }}
            placeholder="请输选择企业">
            {userArr}
          </Select>,
        )}
      </FormItem>,
      <FormItem key="status" {...this.formLayout} label="状态">
        {form.getFieldDecorator('status', {
          rules: [{ required: true, message: '请选择状态！' }],
          initialValue: values.status,
        })(
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={2}>暂停</Radio>
          </RadioGroup>,
        )}
      </FormItem>,

    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;
    const { values } = this.props;
    this.setState({
      listData: values,
    });
    //完成
    const handleNext = () => {
      const { form, values, handleUpdate, handleAdd, modalVisible } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        if (modalVisible) {
          handleAdd(formVals);
        } else {
          handleUpdate(formVals);
        }
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={modalVisible ? '新增账户' : '修改账户'}
        visible={updateModalVisible}
        onOk={handleNext}
        onCancel={() => handleUpdateModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
